<template>
  <div class="height_100">
    <page-model
      :title="pageName"
      :btnName="btnName"
      @titleEvent=titleEvent
      >
          <div class="selectionBox">
            <label class="Correlation">
              <p class="selectItem">选择区域</p>
              <el-select v-model="areaId" clearable>
                <el-option
                  v-for="(item,index) in itemList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                  @click.native="getDataList()"
                >{{item.name}}({{item.count}})</el-option>
              </el-select>
            </label>
            <div class="selectDocument" @click="getDataList()">查询</div>
            <div class="reset" @click="reset">重置</div>
        </div>
        <div class="mainBox">
          <header>
            <div class="uploadData" @click="addDocList">添加</div>
          </header>
          <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
            <thead>
              <th>序号</th>
              <th>摄像头编号</th>
              <th>区域</th>
              <th>是/否球机</th>
              <th>监测状态</th>
              <th>状态</th>
              <th>操作</th>
            </thead>
            <tbody v-if="actionTableData.length">
              <tr v-for="(item, index) in actionTableData" :key="item.learnId">
                <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
                <td>{{ item.cameraId }}</td>
                <td>{{item.areaName}}</td>
                <td>{{ item.isSpeedDome?'是':'否' }}</td>
                <td>{{ item.accidentTypeNames }}</td>
                <td :style="{color:item.cameraStatus?'#2EBB25':'#666666'}">{{item.cameraStatus?'在线':'离线'}}</td>
                <td>
                  <span @click="viewDoc(item)">查看</span>
                  <span @click="writeDoc(item)">编辑</span>
                  <span @click="deleteDoc(item)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="block" v-if="actionDataCount">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="actionDataCount"
            ></el-pagination>
          </div>
          <!-- 当表头为空时 -->
          <div class="empty" v-if="!actionDataCount">
            <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
            <span>空空如也</span>
          </div>
        </div>
      <delete-alert-box
      v-if="isDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
    </page-model>
    <big-alert-box
    :title="'摄像头详情'"
    @Cancel="closeDesc"
    v-if="isViewDesc"
    >
      <div class="cameraDes">
        <div class="flex-between mb-30">
          <span class="desTitle">摄像头编号：{{cameraDesData.cameraId}}</span>
          <span class="desArea">区域：{{cameraDesData.areaName}}</span>
        </div>
        <div class="video">
          <video
            height="100%"
            width="100%"
            class="video-component"
            ref="videoElement"
            controls
            autoplay
          ></video>
        </div>
      </div>
    </big-alert-box>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import flvjs from 'flv.js'
// // console.log(require)
export default {
  data () {
    return {
      pageName: '行为识别',
      btnName: '区域管理',
      // 当前页
      currentPage: +'',
      // 分页
      total: +'',
      index: 1,
      pageSize: 10,
      areaId: '',
      // 选择类目
      isViewDesc: false,
      cameraDesData: {},
      flvPlayer: null,
      descTips: [],
      isDelete: false,
      cameraId: ''
    }
  },
  computed: {
    ...mapState('actionRecognition', [
      'itemList',
      'actionTableData',
      'actionDataCount'
    ])
  },
  methods: {
    openVideo (src) {
      // this.$store.commit('set_videoSrc', src)
    },
    titleEvent () {
      this.$router.push('/areaManage')
    },
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.getDataList()
    },
    // flv播放
    createVideo (url) {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: url,
          isLive: false,
          hasVideo: true,
          enableStashBuffer: false,
          stashInitialSize: 128
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    // 展示列表
    getDataList () {
      const params = {
        areaId: this.areaId,
        pageSize: this.pageSize,
        projectId: Number(localStorage.getItem('projectId')),
        index: this.index
      }
      this.$store.dispatch('actionRecognition/getActionTableData', params).then(res => {
        // console.log(res)
      })
    },
    getItemList () {
      this.$store.dispatch('actionRecognition/getCateList').then(res => {
        // console.log(res)
      })
    },
    // 预览文档
    async viewDoc (item) {
      this.isViewDesc = true
      this.cameraDesData = item
      this.$nextTick(() => {
        item.cameraWebIp.indexOf('flv') !== -1 && this.createVideo(item.cameraWebIp)
      })
      // console.log('查看')
    },
    closeDesc () {
      this.isViewDesc = false
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    },
    // 下载视频
    async uploadDoc (item) {
      const typeDesc = 'video/' + item.videoUrl.slice(item.videoUrl.length - 3, item.videoUrl.length)
      const blob = new Blob([item.videoUrl], { type: typeDesc })
      // console.log(blob)
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = item.modelTitle
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, item.modelTitle)
      }
    },
    // 编辑文档
    writeDoc (item) {
      this.$router.push('/addCamera')
      sessionStorage.setItem('cameraId', item.id)
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.cameraId = item.id
      this.descTips = [{
        tips: `确定删除摄像头"${item.cameraId}"？`,
        default: ''
      }]
    },
    Confirm () {
      // console.log('确定')
      const params = {
        id: this.cameraId
      }
      this.$store.dispatch('actionRecognition/removeAction', params).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 500
          })
          this.isDelete = false
          this.getDataList()
        }
      })
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },
    // 查询相关文档
    selectDocument () {
      this.getDataList()
    },
    // 重置文档
    reset () {
      this.areaId = ''
      this.getDataList()
    },
    // 控制更新盒子隐藏
    addDocList () {
      sessionStorage.removeItem('cameraId')
      this.$router.push('/addCamera')
    }
  },
  created () {
    this.getItemList()
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/clickBox.scss";
@import "@/styles/dataModule.scss";
    .mainBox{
    min-height: calc(100% - 198px);
  }
  .selectionBox .Correlation .el-select{
    left: 70px;
  }
  .selectionBox .documentName{
    left:30px;
  }
  .selectionBox .el-input{
    left: 100px;
  }
  .selectionBox .selectDocument{
    left: 380px;
  }
  .selectionBox .reset{
    left: 480px;
  }
.cameraDes{
  padding: 37px 30px 0;
  .desTitle,.desArea{
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:22px;
  }
  .video{
    height: 450px;
    width: 100%;
  }
}
</style>
